<template>
	<view class="count">
		<view class="list">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<view v-for="(item,index) in list" @click="clicklistItem(item)" :key="index"
					class="listItem f f-a-c f-j-b b-r-20 b-f p-30 m-b-20">
					<view class="left">
						<view class="top">
							{{item.name}} <text>{{item.mobile}}</text>
						</view>
						<view class="addRess">
							<text v-if="item.defaulted">[默认]</text>{{item.province}} {{item.city}} {{item.district}}
							{{item.detail}}
						</view>
					</view>
					<image @click.stop="goBian(item)" src="/static/Editing.png" class="bianji" mode=""></image>
				</view>
			</scroll-view>
			<view v-if="list.length==0" class="zanwu f f-d-c f-a-c f-j-c">
				<image src="/static/zanwu3.png" class="zanwuImg" mode=""></image>
				<view class="counts">
					您还没有添加地址哦
				</view>
			</view>
		</view>
		<view @click="goAddNewAddress" class="btn">
			添加新地址
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['']
			}
		},
		onShow() {
			this.initList()
		},
		methods: {
			// 点击列表
			clicklistItem(item) {
				uni.setStorageSync('address', item)
				uni.navigateBack()
			},
			async initList() {
				let n = await this.$api.addressesList()
				this.list = n.data.rows
			},
			goBian(item) {
				uni.navigateTo({
					url: '/pages/shoop/AddNewAddressBian?item=' + JSON.stringify(item)
				})
			},
			onreachBottom() {
				console.log('88888888888');
			},
			// 添加新地址
			goAddNewAddress() {
				uni.navigateTo({
					url: '/pages/shoop/AddNewAddress'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 90%;
		height: 100vh;
		margin: 0 auto;
		padding-bottom: 170rpx;

		.listItem {
			.bianji {
				width: 40rpx;
				height: 40rpx;
			}

			.left {
				width: 85%;

				.addRess {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #6a5f55;
					line-height: 1.7;
					margin-top: 15rpx;

					text {
						color: #977961;
						margin-right: 10rpx;
					}
				}

				.top {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 600;
					text-align: LEFT;
					color: #2f2319;

					text {
						margin-left: 32rpx;
					}
				}
			}
		}
	}

	.zanwu {
		position: fixed;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;

		.zanwuImg {
			width: 350rpx;
			height: 180rpx;
		}

		.counts {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			color: #ada6a0;
			margin-top: 15rpx;
		}
	}

	.btn {
		width: 90%;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		height: 96rpx;
		line-height: 95rpx;
		background: #977961;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #f7f6f2;
		padding-bottom: 170rpx;
	}
</style>